<template>
  <div class="growthPlan">
    <div class="header">
      <div class="title">
        <img src="@/assets/images/Slogan.png" alt="">
        <!--<div style="width: 0.4rem;height: 1px;background: #E3C58D"></div>-->
        <!--<span style="margin: 0 10px">· 让兼职成为一种职业 ·</span>-->
        <!--<div style="width: 0.4rem;height: 1px;background: #E3C58D"></div>-->
      </div>
      <div class="photo">
        <img :src="form.head_img_url" alt="">
      </div>
      <div class="name">当前身份:{{form.user_type |userTypefFilter}}</div>
      <div class="tip1">累计邀请关注人数：{{form.spread_user_num}}</div>
      <div class="tip2">距离成为生产队还差人数：{{form.need_more_user_num}}</div>
    </div>
    <div class="div1">
      <div class="left">
        <span>{{form.spread_today_user_num}}<span style="margin: 0 4px;font-size: 0.48rem;color: #FDC12C;">/</span>{{form.day_limit_man}}</span>
        <span>每日推广上限人数</span>
      </div>
      <div class="line1"></div>
      <div class="right">
        <span>{{form.spread_user_num}}<span style="margin: 0 4px;font-size: 0.48rem;">/</span>{{form.limit_man}}</span>
        <span>总推广上限人数</span>
      </div>
    </div>
    <div class="line2"></div>
    <div class="main">
      <img class="headerImg" src="@/assets/images/Assessment.png" alt="">
      <div class="table">
        <table cellpadding="0" cellspacing="0">
          <tr>
            <th>等级</th>
            <th>权益</th>
            <th>累计邀请关注人数</th>
          </tr>
          <tr v-for="(item,index) in form.ssessment">
            <td>{{item.level}}</td>
            <td>{{item.rights}}</td>
            <td>{{item.spread_user_num}}</td>
          </tr>
        </table>
      </div>
      <div class="tip3">
        <span>* 规则说明<br>  </span>
        <div v-html="$options.filters.upgradeRule(form.upgrade_rule)"></div>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/17 16:21.
   */
  import {Indicator} from 'mint-ui';
  import utils from '@/lib/StringExtend'

  export default {
    mounted() {
      this.loadData();
    },
    components: {},
    props: {},
    data() {
      return {
        wechatId: utils.getCookie('wechat_id'),
        form: {}
      }
    },
    computed: {},
    methods: {
      loadData() {
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        Indicator.open('加载中...');
        this.$axios.upgradePlan(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.form = res.data;
        })
      }
    },
    watch: {},
    filters: {
      userTypefFilter(val) {
        if (val === 1) {
          return '社员'
        } else if (val === 2) {
          return '生产队'
        }
      },
      upgradeRule(val) {
        var regR = /\r/g;
        var regN = /\n/g;
        return val.replace(regN, "<br>");
      }
    },
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .growthPlan {
    font-weight: inherit;
    width: 100%;
    height: 100%;

    .header {
      width: 100%;
      height: 3.9rem;
      background: url("../../../../assets/images/Growthplan.png") no-repeat;
      background-size: 100% 100%;
      position: relative;

      .title {
        width: 5rem;
        position: absolute;
        top: 0.54rem;
        left: 50%;
        margin-left: -2.5rem;

        img {
          width: 100%;
        }

        /*color: #E3C68D;*/
        /*position: absolute;*/
        /*top: 0.54rem;*/
        /*left: 50%;*/
        /*margin-left: -3.5rem;*/
        /*text-align: center;*/
        /*font-size: 0.26rem;*/
        /*display: flex;*/
        /*flex-direction: row;*/
        /*align-items: center;*/
        /*justify-content: center;*/
        /*span{*/
        /*letter-spacing:8px;*/
        /*}*/
      }

      .photo {
        width: 0.92rem;
        height: 0.92rem;
        border: 2px solid #fff;
        position: absolute;
        border-radius: 50%;
        top: 1.63rem;
        left: 1.13rem;
        z-index: 99;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .name {
        position: absolute;
        width: 5rem;
        top: 1.54rem;
        left: 2.37rem;
        font-size: 0.26rem;
        color: #FDC12C;
        text-align: left;
        letter-spacing: 2px;
        font-weight: inherit;
      }

      .tip1 {
        position: absolute;
        width: 5rem;
        text-align: left;
        top: 1.94rem;
        left: 2.35rem;
        font-size: 0.26rem;
        color: #FFFFFF;
        letter-spacing: 2px;
        font-weight: inherit;
      }

      .tip2 {
        position: absolute;
        width: 5rem;
        text-align: left;
        top: 2.36rem;
        left: 2.35rem;
        font-size: 0.26rem;
        color: #FFFFFF;
        letter-spacing: 2px;
        font-weight: inherit;
      }
    }

    .div1 {
      width: 100%;
      height: 1.56rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .line1 {
        width: 1px;
        height: 0.77rem;
        background: #EAEAEA;
      }

      .left, .right {
        width: 50%;
        display: flex;
        flex-direction: column;

        span {
          text-align: center;
        }
      }

      .left {
        span:first-child {
          color: #FDC12C;
          font-size: 0.48rem;
        }

        span:last-child {
          color: #908F8F;
          font-size: 0.24rem;
          margin-top: 0.2rem;
        }
      }

      .right {
        span:first-child {
          color: #908F8F;
          font-size: 0.48rem;
        }

        span:last-child {
          color: #908F8F;
          font-size: 0.24rem;
          margin-top: 0.2rem;
        }
      }
    }

    .line2 {
      width: 100%;
      height: 0.12rem;
      background: #FAFAFA;
    }

    .main {
      width: 100%;
      padding-bottom: 0.2rem;
      box-sizing: border-box;

      .headerImg {
        width: 4rem;
        margin: 0.5rem auto 0.3rem;
        display: block;
      }

      .table {
        width: 6.6rem;
        border: 1px solid #FDC12C;
        font-size: 0.24rem;
        overflow: hidden;
        margin: 0 auto;
        color: #FDC12C;

        th {
          height: 0.6rem;
          color: white;
        }

        tr:first-child {
          width: 100%;
          background: #FDC12C;
        }

        td {
          border-top: 1px solid #FDC12C;
          border-right: 1px solid #FDC12C;
          height: 0.6rem;
          text-align: center;
          font-size: 0.22rem;
        }

        th:first-child {
          width: 1.56rem;
        }

        th:nth-child(2) {
          width: 2.9rem;
        }

        th:last-child {
          width: 2.3rem;
        }

        td:first-child {
          width: 1.56rem;
        }

        td:nth-child(2) {
          width: 2.9rem;
        }

        td:last-child {
          width: 2.1rem;
          border-right: 0
        }
      }

      .tip3 {

        width: 6.38rem;
        margin: 0.3rem auto 0.4rem;
        color: #A6A6A6;
        font-size: 0.24rem;
      }
    }
  }
</style>
